<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">


	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>退换货</title>
		<link th:href="@{/assets/css/amazeui.css}" rel="stylesheet" type="text/css"/>
		<link th:href="@{/assets/css/admin.css}" rel="stylesheet" type="text/css"/>
		<link th:href="@{/css/personal.css}" rel="stylesheet" type="text/css">
		<link th:href="@{/css/refstyle.css}" rel="stylesheet" type="text/css">

		<script th:src="@{/assets/js/jquery.min.js}"></script>
		<script th:src="@{/assets/js/amazeui.min.js}"></script>

	</head>

	<body>
	<!--头 -->
	<header>
		<article>
			<div class="mt-logo">
				<!--顶部导航条 -->
				<div th:include="public/pagehead::common"></div>

				<!--悬浮搜索框-->
				<div th:include="public/pagehead::search"></div>

				<div class="clear"></div>

			</div>
		</article>
	</header>
	<!--全部分类-->
	<div class="nav-table">
		<!--全部分类-->
		<div th:include="public/pagehead::category"></div>
	</div>
			<b class="line"></b>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">
					<!--标题 -->
					<div class="am-cf am-padding">
						<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">退换货申请</strong> / <small>Apply&nbsp;for&nbsp;returns</small></div>
					</div>
					<hr/>
					<div class="comment-list">
					<!--进度条-->
				<!--	<div class="m-progress">
						<div class="m-progress-list">
							<span class="step-1 step">
                                <em class="u-progress-stage-bg"></em>
                                <i class="u-stage-icon-inner">1<em class="bg"></em></i>
                                <p class="stage-name">买家申请退款</p>
                            </span>
							<span class="step-2 step">
                                <em class="u-progress-stage-bg"></em>
                                <i class="u-stage-icon-inner">2<em class="bg"></em></i>
                                <p class="stage-name">商家处理退款申请</p>
                            </span>
							<span class="step-3 step">
                                <em class="u-progress-stage-bg"></em>
                                <i class="u-stage-icon-inner">3<em class="bg"></em></i>
                                <p class="stage-name">款项成功退回</p>
                            </span>                            
							<span class="u-progress-placeholder"></span>
						</div>
						<div class="u-progress-bar total-steps-2">
							<div class="u-progress-bar-inner"></div>
						</div>
					</div>-->
					
					
						<div class="refund-aside" th:each="refund: ${refundVos}">
							<div class="item-pic">
								<a href="#" class="J_MakePoint">
									<img th:src="${refund.getImage()}" class="itempic">
								</a>
							</div>

							<div class="item-title">

								<div class="item-name">
									<a href="#">
										<p class="item-basic-info" th:text="${refund.getProDesc()}">美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
									</a>
								</div>
								<div class="info-little">
									<span>颜色：洛阳牡丹</span>
									<span>包装：裸装</span>
								</div>
							</div>
							<div class="item-info">
								<div class="item-ordernumber">
									<span class="info-title">订单编号：</span><a id="no" th:text="${refund.getInvoice()}">1474784641639947</a>
								</div>
								<div class="item-price">
									<span class="info-title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：</span><span class="price" th:text="${refund.getUnitPrice()}">19.88元</span>
									<span>x</span> <span class="number" th:text="${refund.getQty()}"></span>
								</div>

								<div class="item-amountall">
									<span class="info-title">总&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计：</span><span class="amountall" th:text="${refund.getUnitPrice()}*${refund.getQty()}">29.88元</span>
								</div>
								<div class="item-time">
									<span class="info-title">成交时间：</span><span class="time" th:text="${refund.getOrderDate()}"></span>
								</div>

							</div>
							<div class="clear"></div>
						</div>

						<div class="refund-main">
							<div class="item-comment">
								<div class="am-form-group">
									<label for="refund-type" class="am-form-label">退款类型</label>
									<div class="am-form-content">

											<input type="text" id="type" disabled value="退款/退货">

									</div>
								</div>
								
								<div class="am-form-group">
									<label for="refund-reason" class="am-form-label">退款原因</label>
									<div class="am-form-content">
										<select data-am-selected="" id="because">
											<option value="1">不想要了</option>
											<option value="2">买错了</option>
											<option value="3">没收到货</option>
											<option value="4">与说明不符</option>
										</select>
									</div>
								</div>

								<div class="am-form-group">
									<label for="refund-money" class="am-form-label">退款金额<span>（不可修改）</span></label>
									<div class="am-form-content">
										<input type="text" id="refund-money" readonly="readonly" >
									</div>
								</div>
								<div class="am-form-group">
									<label for="refund-info" class="am-form-label">退款说明<span>（可不填）</span></label>
									<div class="am-form-content">
										<textarea placeholder="请输入退款说明"></textarea>
									</div>
								</div>

							</div>
						<!--	<div class="refund-tip">
								<div class="filePic">
									<input type="file" class="inputPic" value="选择凭证图片" name="file" max="5" maxsize="5120" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
									<img src="../images/image.jpg" alt="">
								</div>
								<span class="desc">上传凭证&nbsp;最多三张</span>
							</div>-->
							<div class="info-btn" id="apply">
								<div class="am-btn am-btn-danger">提交申请</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>

				<!--底部-->
				<div th:include="public/pagehead::footer"></div>
			</div>

			<aside th:include="public/pagehead::person" class="menu">
			<!--	<ul>
					<li class="person active">
						<a href="#">个人中心</a>
					</li>
					<li class="person">
						<a href="#">个人资料</a>
						<ul>
							<li> <a href="information">个人信息</a></li>
							<li> <a href="safety">安全设置</a></li>
							<li> <a href="address">收货地址</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的交易</a>
						<ul>
							<li><a href="order">订单管理</a></li>
							<li> <a href="change">退款售后</a></li>
							<li > <a href="bill">账单明细</a></li>
						</ul>
					</li>

				</ul>-->

			</aside>
		</div>
	<script th:src="@{/layuiadmin/layui/layui.all.js}">  </script>
	<script>
        ;!function(){
            //无需再执行layui.use()方法加载模块，直接使用即可
            var form = layui.form
                , layer = layui.layer;
            var $ = layui.$
                , admin = layui.admin
                , element = layui.element
                , layer = layui.layer
                , laydate = layui.laydate
                , form = layui.form;
            form.render();
            laydate.render();

            //获取表单金额

			var price=0;
			for (var i=0;i<$('.amountall').length;i++){
          	 	price += $($('.amountall')[i]).text()*1;

            }
            $('#refund-money').val(price);
            var price = $('#refund-money').val()
			//获取订单编号
			var no= $('#no').text()

			//点击提交
			$('#apply').on('click',function () {
                //获取退款说明
                var textareaValue = $('textarea').val();
                //退款原因
                var because = $('#because ').find("option:selected").text();
                //获取退款类型
                var type = $('#type').val();
                console.log(textareaValue)
				if( textareaValue == ''){
                  layer.msg('写入退款说明',{icon:5})
				}else{
                      $.ajax({
                   type:'post',
                   url:'returnOrder',
                   data:{reason:because,content:textareaValue,invoiceNo:no},
                   //dataType:'json',
                   async:false,
                   success:function (res) {
                       if (res.code ==1 ){
                           layer.msg(res.msg,{icon:6},function(){
                               document.location.href = "change"
                           })
                       }else{
                           layer.msg(res.msg,{icon:5})
                       }
                   }
               })
				}



            })


        }();

	</script>
	</body>

</html>